<template>
  <wd-config-provider :theme="theme">
    <!-- 主页面 -->
    <view class="page-wraper">
      <!-- navbar栏 -->
      <page-navbar :navbar="navbar" :style="{ opacity: navbarOpacity }"></page-navbar>
      <!-- 主内容 -->
      <view class="page-container">
        <slot></slot>
      </view>
      <!-- tabbar栏 -->
      <page-tabbar></page-tabbar>
    </view>
    <!-- 其他全局组件 -->
    <wd-toast />
    <wd-notify />
  </wd-config-provider>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useGlobalStore } from '@/store/global'
import { preLoadPage, preShowPage } from '@/utils/prehandle'
import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app'

const props = defineProps({
  /**
   * navbar配置
   * @param {Boolean} hide 是否关闭navbar，默认false
   * @param {String} title 标题，默认页面标题
   * @param {Boolean} bordered 是否显示边框，默认true
   * @param {Boolean} placeholder 是否显示占位，默认true
   * @param {String} customClass 自定义class，默认'navbar-transparent navbar-blureffect'
   * @param {String} customStyle 自定义样式，默认空
   * @param {String} linearScroll 线性滚动方式，默认空，可选 in | out | ''
   * @param {Number} linearScrollThreshold 线性滚动阈值，默认200
   */
  navbar: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

/**
 * 页面变量
 */

const globalStore = useGlobalStore()
const theme = computed(() => globalStore.theme)

// 顶部状态栏高度
const statusBarHeight = computed(() => {
  return uni.getSystemInfoSync().statusBarHeight + 'px'
})

/**
 * 页面各生命周期处理
 */

onLoad(() => {
  preLoadPage() // 页面加载预处理
})

let firstShow = true
onShow(() => {
  preShowPage(firstShow) // 页面首次显示预处理
  firstShow = false
})

/**
 * navbar 线性滚动
 * @param {String} props.navbar.linearScroll 线性滚动方式，默认空，可选 in | out | ''
 * @param {Number} props.navbar.linearScrollThreshold 线性滚动阈值，默认200
 * @description in为滚动时由无到有，out为滚动时由有到无，空为无效果
 */
const { linearScroll, linearScrollThreshold = 200 } = props.navbar
const navbarOpacity = ref(linearScroll == 'in' ? 0 : 1)

onPageScroll((e) => {
  if (!linearScroll) return // 无线性滚动时，不执行

  let equation // 定义线性滚动方程
  if (linearScroll == 'in') {
    equation = (1 / linearScrollThreshold) * e.scrollTop
  } else if (linearScroll == 'out') {
    equation = (-1 / linearScrollThreshold) * e.scrollTop + 1
  }
  navbarOpacity.value = Math.max(0, Math.min(1, equation))
})
</script>

<script>
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: 'shared'
  }
}
</script>

<style lang="scss">
// 主页面
.page-wraper {
  background-color: var(--bg-color);
  color: var(--text-color);
  position: relative;
  box-sizing: border-box;

  .page-container {
    box-sizing: border-box;
    position: relative;

    --page-full-h: calc(100vh - env(safe-area-inset-bottom));
    --page-h: calc(100vh - 44px - 90px - env(safe-area-inset-bottom) - v-bind(statusBarHeight));
    --page-nonav-h: calc(100vh - 90px - env(safe-area-inset-bottom) - v-bind(statusBarHeight));
    --page-notab-h: calc(100vh - 44px - env(safe-area-inset-bottom) - v-bind(statusBarHeight));
  }
}
</style>
